<!--
 * @Description: 登录页面
 * @Version: 1.0
 * @Author: wenbin
 * @Date: 2021-09-15 13:47:15
 * @LastEditors: wenbin
 * @LastEditTime: 2022-01-12 10:56:09
 * @FilePath: /vite-ts-vue3-test/src/views/login/index.vue
 * Copyright (C) 2021 wenbin. All rights reserved.
-->
<template>
  <div class="login">
    <el-image class="login-bg" src="/image/loginBg.png" />
    <div class="login-bg-mask"></div>
    <div class="login-content">
      <div class="login-content-inner">
        <h1 class="login-title">欢迎使用</h1>
        <h3 class="login-subtitle">pinshu</h3>
        <div class="login-tips">使用账号密码登录</div>
        <el-form :model="loginData" ref="loginForm" :rules="loginRules" label-width="0px">
          <el-form-item prop="loginId">
            <el-input
              class="login-input"
              type="text"
              @keyup.enter="submit"
              v-model="loginData.loginId"
              placeholder="账号"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              class="login-input"
              type="password"
              @keyup.enter="submit"
              v-model="loginData.password"
              placeholder="密码"
            />
          </el-form-item>
        </el-form>
        <el-button @click="submit" :loading="loading" class="login-btn" type="primary"
          >登录</el-button
        >
      </div>
    </div>
    <magus-footer />
  </div>
</template>

<script lang="ts">
  import Cookie from 'js-cookie';
  import { defineComponent, reactive, toRefs } from 'vue';
  import { useRouter } from 'vue-router';
  // import loginBg from '../../assets/image/loginBg.png';
  export default defineComponent({
    name: 'Login',
    components: {},
    setup() {
      const router = useRouter();
      // const route = useRoute();
      const state = reactive({
        loginData: {
          loginId: '',
          password: '',
        },
        loading: false,
        loginRules: {
          loginId: [
            {
              required: true,
              message: '请输入账号',
              trigger: 'blur',
            },
          ],
          password: [
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur',
            },
          ],
        },
      });
      const methods = {
        submit() {
          state.loading = true;
          Cookie.set('auth_token', '11111');
          setTimeout(() => {
            router.push({ name: 'home' });
            state.loading = false;
          }, 1000);
        },
      };
      return {
        ...toRefs(state),
        ...methods,
      };
    },
    data() {
      return {};
    },
  });
</script>
<style lang="scss" scoped>
  .login {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .login-bg {
      width: 100%;
      height: 100%;
    }
    .login-bg-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 71, 141, 0.75);
    }
    .login-content {
      width: 450px;
      height: 500px;
      background: #ffffff;
      border-radius: 6px;
      box-shadow: 0px 6px 41px 5px rgba(4, 97, 135, 0.15);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      @include flexs();
      @include flexOther();
      .login-content-inner {
        width: 80%;
        .login-title {
          font-size: 30px;
          color: rgba(0, 71, 141, 1);
          margin-bottom: 10px;
          text-align: center;
          font-family: Adobe Heiti Std, Adobe Heiti Std-R;
        }
        .login-subtitle {
          color: rgba(137, 137, 137, 1);
          font-size: 14px;
          font-family: Adobe Heiti Std, Adobe Heiti Std-R;
          text-align: center;
        }
        .login-tips {
          font-size: 14px;
          font-family: SourceHanSansSC, SourceHanSansSC-Regular;
          text-align: left;
          color: #333333;
          margin-top: 40px;
          margin-bottom: 25px;
        }
        .login-input {
          // margin-top: 24px;
        }
        .login-btn {
          // margin-top: 35px;
          width: 100%;
        }
        .login-register {
          @include flexs();
          @include flexOther();
          font-size: 14px;
          margin-top: 20px;
          color: rgba(153, 153, 153, 1);
        }
      }
    }
  }
</style>
